<div class="dashboard-container">
  @if ((bookState$ | async)?.loaded === false) {
    <p-progressSpinner styleClass="spinner center-spinner"></p-progressSpinner>
  }
  @if ((bookState$ | async)?.loaded === true) {
    <div class="dashboard">
      <div>
        @if (isLibrariesEmpty$ | async) {
          <div class="dashboard-no-library">
            @if ((userService.userState$ | async)?.permissions; as permissions) {
              <div>
                @if (permissions.admin || permissions.canManipulateLibrary) {
                  <div>
                    <h1 class="no-library-header">Looks like you haven't added a library yet. Let's add one!</h1>
                    <p-button
                      label="Add a Library"
                      icon="pi pi-plus"
                      styleClass="p-button-rounded p-button-outlined"
                      (click)="createNewLibrary()">
                    </p-button>
                  </div>
                }
              </div>
            }
          </div>
        } @else {
          <app-dashboard-scroller
            [books]="lastReadBooks$ | async"
            [bookListType]="'lastRead'"
            [title]="'Last Read Books'">
          </app-dashboard-scroller>
          <div class="mb-6">
            <p-divider></p-divider>
          </div>
          <app-dashboard-scroller
            [books]="latestAddedBooks$ | async"
            [title]="'Latest Added Books'">
          </app-dashboard-scroller>
          <div class="mb-6">
            <p-divider></p-divider>
          </div>
          <app-dashboard-scroller
            [books]="randomBooks$ | async"
            [title]="'Discover Random Reads'">
          </app-dashboard-scroller>
        }
      </div>
    </div>
  }
</div>
